<template>
    <p v-bind:class="{ 'active': isActive, 'text-danger': hasError }">Class样式绑定</p>
    <p :class="classObject">Class样式绑定2</p>
    <div :class="classObj">Class样式绑定2</div>
    <p :class="[arrActive, arrHasError]">Class样式绑定3</p>
    <p :class="[isActive ? 'active text-danger' : '']">Class样式绑定4</p>
    <p :class="[isActive ? 'active' : '', { 'text-danger': hasError }]">Class样式绑定5</p>
</template>

<script>
export default {
    data() {
        return {
            isActive: true,
            hasError: true,
            error: null,
            classObject: {
                'active': true,
                'text-danger': false
            },
            arrActive: "active",
            arrHasError: "text-danger",

        }
    },
    computed: {
        classObj() {
            return {
                'active': this.isActive && !this.error,
                'text-danger': this.error && this.error.type === 'fatal'
            }
        }
    }
}
</script>
<style>
.active {
    font-size: 30px;
}

.text-danger {
    color: red;
}
</style>